﻿<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
#allmap {width: 500PX;height: 400PX;overflow: hidden;margin:0;margin:0 auto;vertical-align:middle;}
#input{width:600px;height:50px;margin:0 auto;}
</style>
 <!--注意此处的参数值ak=百度开放平台上申请key，请重新申请，也可以使用该key值-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=24661721a13ef054b221f80ab69b36e8"></script>
<title>百度地图调用Demo</title>
</head>
<body>
    <div id="input">
        <span>出发城市：</span><input id="txtStart" type="text" />
        <span>目的城市：</span><input id="txtEnd" type="text" />
        <input id="btnSearch" type="button" value="搜索线路" onclick="search();" />
    </div>
    <div id="allmap"></div>
</body>

<script type="text/javascript">
    function search() {
        var start = document.getElementById("txtStart").value
        , end = document.getElementById("txtEnd").value;
        // 百度地图API功能
        var map = new BMap.Map("allmap");
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
        var driving = new BMap.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true } });
        driving.search(start, end);
    }
</script>
    
</html>
